//out: ../css/

@import './base';
@vw:3.75vw;


body{
  background-color: #f2f4f5;
  background-color: #f9fafb;
  padding: 0 (15/@vw);
}

header {
  width: 100%;
  height: (50/@vw);
  background-color: #fff;
  display: flex;
  left: 0;
  top: 0;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  padding-right: (15/@vw);

    .container {
      width: (235/@vw);
      height: (50/@vw);
      background-image: url(../assets/head.png);
      background-size: contain;
      background-repeat: no-repeat;
    }

    a {
      width: (80/@vw);
      height: (30/@vw);
      background-color:#fbe427 ;
      border-radius: (15/@vw);
      text-align: center;
      line-height:(30/@vw);
    }
}

.search {
  width: 100%;
  height: (52/@vw);
  margin-top: (50 / @vw);
  // background-color: pink;
    .txt {
      width: (345/@vw);
      height: (32/@vw);
      background-color: #f2f4f5;
      color: #a1a4b3;
      border-radius: (16/@vw);
      text-align: center;
      line-height: (32/@vw);
    }
}

.banner {
  width: 100%;
  height: (108/@vw);
  // background-color: pink;
  display: flex;
  justify-content: center;
    img {
      width:100%;
      height: 100%;
    }
}

.list {
  width: 100%;
  margin-top: (20/@vw);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom:(20/@vw);
        h4 {
          font-size: (20/@vw);
        }
        a{
          font-size: (12/@vw);
          color:#a1a4b3 ;
        }
    }

    .item {
      width: 100%;
      display: flex;
      background-color: #fff;
      margin-bottom: (20/@vw);
        img {
          width: (105/@vw);
          height: (105/@vw);
          border-radius: (10 /@vw);
          margin-right: (15 /@vw);
        }
        .right {
          display: flex;
          flex-direction: column;
          a{
            line-height: (28/@vw);
          }
          p{
            font-size: (12/@vw);
            color: #a1a4b3;
            line-height: (21.6/@vw);
          }
        }
    }
}

.recommend {
  width: 100%;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:(20/@vw);
      h4 {
        font-size: (20/@vw);
      }
      a{
        font-size: (12/@vw);
        color:#a1a4b3 ;
      }
  }
  .content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width:(105/@vw);
      height: (141/@vw);
      background-color: #fff;
      margin-bottom: (15/@vw);
      position: relative;
        img {
          width: 100%;
        }
        .count {
          width: (70/@vw);
          height: (28/@vw);
          background-color: rgba(0, 0, 0, 0.8);
          color: #fff;
          position: absolute;
          left: 0;
          top: (78/@vw);
          text-align: center;
          line-height: (28/@vw);
        }
        .txt{
          width: 100%;
          height: (36/@vw);
        }
    }
  }
}

.download {
  width: (345/@vw);
  height: (45/@vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: (15/@vw);
  position: fixed;
  bottom: (15/@vw);
  background-color: #fff;
  padding: 0 (15/@vw);
    img{
      width: (36/@vw);
      height: (36/@vw);
    }
    p{
      width: (242/@vw);
      height: (18/@vw);
    }
    span{
      width: (32/@vw);
      height: (32/@vw);
      background-color: #f2f3f5;
      border-radius: (16/@vw);
      text-align: center;
      line-height: (32/@vw);
    }

}
